<!DOCTYPE html>

<head>
<style>
	body {
		font-family:sans-serif;
		line-height:120%;
		font-size:90%;
	}
	.yui3-widget { border: 1px solid blue; }
</style>
<script type="text/javascript" src="../../../../build/yui/yui-debug.js"></script> 
</head>

<body class="yui3-skin-sam">


	<script type="text/javascript">

		YUI.add('wid', function(Y){
		    
		    Y.Wid = Y.Base.create('wid', Y.Widget, [Y.WidgetStdMod], {
		        
		        renderUI : function() {
		            this.setStdModContent('body', 'first');
		            this.setStdModContent('body', 'second', 'after');
		            this.setStdModContent('body', '3', 'after');
		            this.setStdModContent('body', '4', 'after');
		            this.setStdModContent('body', '5', 'after');
		            this.setStdModContent('body', '6', 'before');
		        },
		        
		        syncUI : function() {

		            this.setStdModContent('body', '<strong>third</strong><br>', 'after');
		            this.head().setContent('Header');
		            var footer = this.foot();
		            this.get('contentBox').appendChild(footer);
		            footer.setContent("Footer");

		        }
		        
		    }, {
		        ATTRS : {}
		    });
		    
		}, '0.1', {requires : ['widget','widget-stdmod', 'base-build'] });

		YUI({filter:"raw"}).use('wid', function(Y){
		   
		    new Y.Wid().render();
		    
		});
	</script>

</body>